// JavaScript Document

$(function(){

	///////////////////////////////////////////////////////////////////////
	// 点击按钮打开图片
	$('#btn1').click(function() {

	// setTimeout(dingshi,1000)

	// function dingshi(){

		// setInterval(zhan,8000);

		zhan();

		function zhan(){
			$('#banner').animate({'width':'100%','height':'400px','display':'block'},3000,hui1);
		} //zhan

		function hui1(){
			setTimeout(hui,3000)

		}

		function hui(){
			$('#banner').animate({'width':'100%','height':'0px'},1000)
		}//hui

	// }


	}) //$('#btn2').click(function() {

	///////////////////////////////////////////////////////////////////////
	// banner删除按钮
	$('.banner span').click(function(){

		$('.banner').css('display','none');
	})

	///////////////////////////////////////////////////////////////////////
	// 可视区域点击滚屏
	
	gundong_left = ($(window).width())/2 + (1210/2);
	// document.title = gundong_left;
	$('#gundong').css({'left':gundong_left+'px','top':'300px'})

	$(window).resize(function(){

		var left = ($(window).width())/2 + (1210/2);
		// document.title = left;
		$('#gundong').css({'left':left+'px','top':'300px'})
	})

	$('#gundong').css('display','none');
	$(window).scroll(function(){
		var top = $(window).scrollTop();
		if(top>=20){
			$('#gundong').css('display','block');
			// $('#gundong').animate({'opacity':'1'},50);
		}else{
			$('#gundong').css('display','none');
			// $('#gundong').animate({'opacity':'0'},50)
		}

	})

	$('#news').scroll(function() {
			// 获得当前元素的滚动条位置（已滚动上去的高度）
			var t = $('#news').scrollTop();
			$('#num').html(t);
		});


	$('#gundong div').click(function(){
		var c = $(this).index();
		// alert(c)
		if(c==9){
			$('html,body').animate({'scrollTop':'0px'},100);
			return;
		}
		var top = $('.floor').eq(c).offset().top;
		$('html,body').animate({'scrollTop':top+'px'},200);
		
	})

	// 问老师：用这种方式取的背景精灵不见效
	// $('#gundong div').mouseenter(function(){
	// 	var xuhao = $(this).index();
	// 	var top = xuhao*38 +xuhao*5 + 'px'; 
	// 	// alert(top);
	// 	$(this).css('background','url(images/go_red.png) no-repeat 0 -'+top);
	// })
	// $('#gundong div').mouseleave(function(){

	// 	$(this).css('background','url() no-repeat 0 -'+top);
	// })

	
	// $('#gundong div').click(function(){


	// })

	///////////////////////////////////////////////////////////////////////
	// 彩票区域的上移效果
	// $('.serve .tubiao1 li').mouseover(function(){
		$(this).parents('.serve').stop().addClass('on');
		var c = $(this).index();
		$(this).parents('.serve').find('.tubiao2').css('display','none');
		// $(this).parents('.tubiao1').css('top','-5px');
		$(this).parents('.serve').find('.tubiao1').animate({'top':'-45px'},150);
		$(this).parents('.serve').find('.con').animate({'top':'28px'},150);
		// $(this).parents('.serve').find('.con').find('li').eq(c).css('display','block').siblings().css('display','none');
		// $(this).parents('.serve').find('.con span').eq(c).css('display','block');

		// 问老师：下面这句话要取表兄弟元素怎么写
		// $(this).parents('.serve').find('.con').not('span').css('display','none')

		// var not_span = $(this).parents('.serve').find('.con span');
		// $('div.pro_info2 ul.texiao img').not($(this)).stop().animate({'opacity':'0.7','left':'0px'},300);
	// })
	// $('.serve').mouseleave(function(){
	// 	$(this).removeClass('on');
	// 	// $(this).find('.tubiao1').animate({'top':'0px'},0);
	// 	// $(this).find('.tubiao1').css('top','10px'); 
	// 	// 问老师：为什么这局不成功
	// })
	// $('.serve .con span.close').click(function(){
	// 	$(this).parents('.serve').removeClass('on');
	// 	$(this).parents('.serve').find('.tubiao1.ok').removeClass('ok');

	// 	$(this).parents('.serve').find('.tubiao1').animate({'top':'0px'},0);
	// })

	///////////////////////////////////////////////////////////////////////
	// 每层楼的特价商品区域的移入图片微透明
	$('.floor .pro_info2 ul.baipic img').mouseenter(function(){
		$(this).css({'opacity':'0.6'}).siblings();
		// $(this).not($(this)).stop().animate({'opacity':'1'},300);
		// $(this).stop().animate({'opacity':'0.7'},300);
		// $(this).ul.eq(0).find('img').css('opacity','0.7');
	})

 	// 问老师：这句话抓不成功，只能抓到一楼的；如何排除轮播图的img
	// $('.floor .pro_info2 ul:first img').mouseleave(function()
	$('.floor .pro_info2 ul.baipic img').mouseleave(function(){
		$(this).css({'opacity':'1'}).siblings();
		// $(this).not($(this)).stop().animate({'opacity':'1'},300);
		// $(this).stop().animate({'opacity':'0.7'},300);
		// $(this).ul.eq(0).find('img').css('opacity','0.7');
	})

	$('.pro_info2 .lunbo_img img').mouseenter(function(){

		$(this).css({'opacity':'1'});
	})
	// 问老师：用三楼的这种写法可不可以
	// $('div.pro_info2 ul.texiao img').mouseenter(function(){
	// 	// $('div.pro_info2 ul.texiao img').not($(this)).animate({'opacity':'0.7'},100);
	// 		$('div.pro_info2 ul.texiao img').not($(this)).stop().animate({'opacity':'0.7','left':'0px'},300);
	// 		$(this).stop().animate({'left':'-15px','opacity':'1'},400);

	// })



	///////////////////////////////////////////////////////////////////////
	// 顶部的二级菜单

	// 二级菜单 城市更换
	// 给li加事件

	$('.city p.yiru	a').click(function(){
		$(this).parents('.city').addClass('show');
		$(this).parents('.city').find('div.hide').find('img').show();
	})

	$('.city').mouseleave(function(){

		$(this).removeClass('show');
		$(this).find('div.hide').find('img').hide();
	})


	// 二级菜单 手机京东
	// 给li加事件
	$('.shouji').hover(function() {
		// 给移入的li加class为cur
		$(this).addClass('show');
		$(this).find('div.hide').find('img').show();
	}, function() {
		$(this).removeClass('show');
		$(this).find('div.hide').find('img').hide();
	});


	// 二级菜单 客服服务
	// 给li加事件
	$('.kefu').hover(function() {
		// 给移入的li加class为cur
		$(this).addClass('show');
		$(this).find('div.hide').find('img').show();
	}, function() {
		$(this).removeClass('show');
		$(this).find('div.hide').find('img').hide();
	});

	// 二级菜单 网站导航
	// 给li加事件
	$('.daohang').hover(function() {
		// 给移入的li加class为cur
		$(this).addClass('on');
		$(this).find('div.hide').find('img').show();
	}, function() {
		$(this).removeClass('on');
		$(this).find('div.hide').find('img').hide();
	});

	///////////////////////////////////////////////////////////////////////
	// 左边大分类 二级菜单

	$('#top4 .l ul li').mouseenter(function(){
		$(this).addClass('on');
		var c = $(this).index()+1;
		$(this).find('.con'+'.a'+c).show();
		$(this).find('.con').find('img').show();

	})
	$('#top4 .l ul li').mouseleave(function(){
		$(this).removeClass('on');
		$(this).find('.con').hide();
		$(this).find('.con').find('img').hide();

	})


	///////////////////////////////////////////////////////////////////////
	// 轮播图代码
	var imgs = document.getElementById("lunbotu").getElementsByTagName("img");
	var spans = document.getElementById("lunbotu").getElementsByTagName("span");
	var c=0;
	

	// 设置定时器
	var dingshi = setInterval(lunbo,1000);

	function lunbo(){
		c++;
		// if(c==6){
		// 	c = 0;
		// }
		c = (c==6)?0:c;
		// 	
		for(var i=0;i<6;i++){
			imgs[i].style.display = 'none';
			spans[i].style.background = '#999';
		}

		// 让c号图片显示，c号li变红
		imgs[c].style.display = 'block';
		spans[c].style.background = '#E4393C';
	}


	for(var i=0;i<6;i++){

		// imgs[i].style.display = 'none';
		// alert(i);
		// lis[i].xuhao = i;
		// document.title = lis[i].xuhao;
		spans[i].xuhao = i;


		spans[i].onmouseover = function(){

		clearInterval(dingshi);

		for(var i=0;i<6;i++){
			spans[i].style.background = '#999';
			imgs[i].style.display = 'none';
			// alert('bbbb');
		}

		this.style.background = '#E4393C';
		imgs[this.xuhao].style.display = 'block';

		}

		spans[i].onmouseout = function(){

			dingshi = setInterval(lunbo,1000);
				
		}

	}


	///////////////////////////////////////////////////////////////////////
	//左右按钮的滑块轮播图 <div id="lunbo2">
	var pic_xuhao=0;

	$('#top4 .bottom .l_btn').click(function(){

		if(pic_xuhao == 0){

			pic_xuhao = 2;
			$('#lunbo2_long').stop().animate({'left':pic_xuhao*-600+'px'},200)
			
		}else{

			pic_xuhao--;
			$('#lunbo2_long').stop().animate({'left':pic_xuhao*-600+'px'},600)
		}

	})


	$('#top4 .bottom .r_btn').click(function(){

		if(pic_xuhao == 2){

			pic_xuhao = 0;
			$('#lunbo2_long').stop().animate({'left':pic_xuhao*-600+'px'},200)
			
		}else{
			
			pic_xuhao++;
			$('#lunbo2_long').stop().animate({'left':pic_xuhao*-600+'px'},600)
		}


	})


	///////////////////////////////////////////////////////////////////////
	//八个格子的图片，鼠标移入，左移+右移 效果
	$('#live .hide img').mouseenter(function(){

		var axuhao = $(this).index();
		// alert(axuhao);
		$(this).stop().animate({'left':'-10px'},200);
		// $('#live .hide img').eq(xuhao).animate({'left':'-10px'},100);

	})

	$('#live .hide img').mouseleave(function(){

		$(this).stop().animate({'left':'0px'},200);

	})

	///////////////////////////////////////////////////////////////////////
	//2楼的轮播图 —— 代码复用

	$('.lunbo').each(function(){
		
		var JSthis = $(this)[0];
		var JQthis = $(this);

		JSthis.c = 0;

		JSthis.lunbo2 = function(){

			JSthis.c++;
			JSthis.c = (JSthis.c==4)?0:JSthis.c;
			// $('div.lunbo_img img').eq(JSthis.lunbo2_c).fadeIn(300).css('display','block').siblings('img').hide();
			JQthis.find('.lunbo_img').find('img').eq(JSthis.c).fadeIn(300).siblings('.lunbo_img img').hide();
			JQthis.find('.lunbo_yuan').find('span').eq(JSthis.c).css('background-color','#7abd54').siblings('.lunbo_yuan span').css('background-color','#999');
		
		}

		JSthis.timer2 = setInterval(JSthis.lunbo2,1000)

		
		// $('p.lunbo_yuan span').mouseleave(function(){
			// timer = setInterval(lunbo2,2000);
		// })

	})


		$('.lunbo .lunbo_yuan span').mouseenter(function(){
			var JSthis2 = $(this)[0];
			var JQthis2 = $(this);
			// var xuhao = $(this).index();

			// 找到lunbo
			var lb = $(this).parents('.lunbo');
			var jslb = lb[0];
			jslb.c = $(this).index();

			// clearInterval(JSthis2.timer2);
			clearInterval(jslb.timer2);

			// JQthis2.parents('.lunbo').find('.lunbo_img img').eq(xuhao).fadeIn(300).siblings('.lunbo_img img').hide();
			JQthis2.parents('.lunbo').find('.lunbo_img img').eq(jslb.c).fadeIn(300).siblings('.lunbo_img img').hide();
			JQthis2.css('background-color','#7abd54').siblings(JQthis2).css('background-color','#999');
			
		})

		$('.lunbo .lunbo_yuan span').mouseleave(function(){
			var JSthis2 = $(this)[0];

			var lb = $(this).parents('.lunbo')[0];


			// setInterval(JSthis.lunbo2,1000);
			lb.timer2 = setInterval(lb.lunbo2,1000);
		})

	// 正常代码 结束
	///////////////////////////////////////////////////////////////////////
	//3楼 图片左右移动 + 变量变暗的效果

	$('div.pro_info2 ul.texiao img').mouseenter(function(){
		// $('div.pro_info2 ul.texiao img').not($(this)).animate({'opacity':'0.7'},100);
			$('div.pro_info2 ul.texiao img').not($(this)).stop().animate({'opacity':'0.7','left':'0px'},300);
			$(this).stop().animate({'left':'-15px','opacity':'1'},400);

	})
	
	// $('div.pro_info2 ul.texiao').mouseleave(function(){

	// 	$(this).find('img').animate({'opacity':'0.6','left':'0px'},300);
	// })
	// $('div.pro_info2 ul.texiao img').fadeTo(0,0.5);

	$('div.pro_info2 ul').mouseleave(function() {
		$(this).find('img').animate({'opacity':'1','left':'0px'},250);
	});

	///////////////////////////////////////////////////////////////////////
	//每层楼的tab切换

	$('.floor .nav .mid ul li').mouseenter(function(){
		var tab1_c = $(this).index();

		$(this).parents('.floor .nav .mid').find('.hongtiao').stop().animate({'left':tab1_c*158+'px'},300);
		$(this).parents('.floor').find('.pro_info2').find('ul').eq(tab1_c).show().siblings('ul').hide();
		
    })

    ///////////////////////////////////////////////////////////////////////
	//每层楼右侧小图切换

	$('div.pro_info3 .bottom p span').mouseenter(function(){

		var xuhao2 = $(this).index();

		$(this).css('background-color','#7abd54').siblings('div.pro_info3 .bottom p span').css('background-color','#999');
		$(this).parents('div.pro_info3').find('.bottom').find('.changdiv').animate({'left':xuhao2*-210+'px'},300)
	})

	//2楼最右侧-上层的移入闪动换图片效果
	$('.pro_info3.pictab .top.tab p span').mouseenter(function(){
		var c = $(this).index();

		$(this).css('background-color','#7abd54').siblings('span').css('background-color','#999')
		$(this).parents('.top.tab').find('ul').eq(c).fadeIn().siblings('ul').fadeOut();

	})

	///////////////////////////////////////////////////////////////////////
	//8楼的右侧tab移入切换
	
	$('.floor.f8 .nav .right_tab li').mouseenter(function(){
		var c = $(this).index();
		// .floor.f8 .nav .right_tab span
		if(c==4){
			back_img = 'background: url(images/sanjiao_red.png) no-repeat 0 0'
			$(this).parents('.right_tab').find('span').css({'width':'50px','background':back_img});
			$(this).parents('.right_tab').find('span').stop().animate({'left':'163px'},150);
		}else{
			$(this).parents('.right_tab').find('span').stop().animate({'left':(c*40-4)+'px'},150);
		}
		$(this).parents('.floor.f8').find('.pro_info3.tab5 ul').eq(c).css('display','block').siblings('ul').css('display','none');

	})

	///////////////////////////////////////////////////////////////////////
	//热门晒单-效果

	setInterval(shaidan1,1000);

	function shaidan1(){
		$('.l.one .wrap .ctn').last().height(0);
		$('.l.one .wrap').prepend($('.l.one .wrap .ctn').last());
		$('.l.one .wrap .ctn').first().animate({'height':'78px'},400)
	}

	setInterval(shaidan2,1000);

	function shaidan2(){
		$('.l.two .wrap .ctn').last().height(0);
		$('.l.two .wrap').prepend($('.l.two .wrap .ctn').last());
		$('.l.two .wrap .ctn').first().animate({'height':'78px'},400)
	}

	// $('#list li').last().height(0);
	// // 将最后一个li移动到第一个位置
	// $('#list').prepend($('#list li').last());
	// // 让第一个li高度变为80
	// $('#list li').first().animate({'height':'78px'}, 500);	

	// #bottom_shai
	// .one
	// .l
	// .ctn

	//轮播图要分清楚是闪动效果，还是滑动效果
	// 闪动效果的js组合
	// 1、display:block none
	// 2、fadeIn
	// 3、抓元素的时候要用子元素+eq

	//////////////////////////////////////////////////////

	// 滑动效果
	// 1、设置一个长div
	// 2、图片之间用左浮动
	// 3、抓元素的时候只针对长DIV的移动，不需要eq

	//////////////////////////////////////////////////////

	// 图片与小圆点联动效果
	// 1、取得当前小圆点的选中序号，把序号赋值给变量
	// 2、把变量的值传给对应图片的序号控制

	//////////////////////////////////////////////////////

	// 通过parents定位元素
	// E:\PHP全部\后盾网 课程\上课资料\作业\0117demo\01 tab切换效果带小滑块-代码复用.html
	
	//////////////////////////////////////////////////////

	// 二级菜单的实现思路：
	// 1、鼠标移到li上，把右边的隐藏box显示出来
	// 2、每个li序号对应一个隐藏的box
	// 3、给li的title文字单独一个p.title标签
	// 4、每个li序号的隐藏box以左边的大盒子作为统一起点
	// 5-1、p.title div.box都设置成隐藏状态的(CSS的路径设置是核心)
	// 5-2、当鼠标移到li上时，通过li.mouseenter时给li加一个.show的class属性
	// 5-3、这样在没加.show的时候，由于p.title的CSS路径(li.show p.title 未加前是:li p.title由于路径不对不会显示p.title)
	// 6-1、p.title的背景色压住div.box的上边框，给两个盒子都设置定位，设置z-index
	// 6-2、如果p.title用了box-shadow，就自身四边都有阴影边框，要去掉自身边框只能弄个白色盖子
	// 7、如果div.box显示后被下层的图片盖住，则要拼爹，把两者的祖父标签设置z-index
	// 8、核心：为什么鼠标移出p.title时候没有消失，是因为

	// <li class="all">  
	// 	<p class="title">111</p>
	// 	<div class="box"></div>
	// </li>
	// 作用范围是title+box的区域，因为all是包着这两块的
	// $('.all').mouseenter 鼠标移入all区域就等于移入了title+box的区域

	// 写代码过程
	// 1、给隐藏的p.title div.box在显示的状态下设置宽高、边框、位置
	// 2-1、给div.box定位好，先加好图片(后面再改回内容)
	// 2-2、设置好第1、2步后，给他们的css路径加上li.show，他们就会隐藏(因为此时li 的html还没show，只有jq加上addClass才有)
	// 3、第1 2步骤写好css后，给他的父级li的(css)设置一个.show的class，li的(html)部分不要加.show
	// 4、第3步是当鼠标移入作用范围li的时候，给li的html部分加上.show
	// 5、当鼠标移入li的时候，html部分会加上.show，那么css部分带有li.show的css路径都会生效

	//////////////////////////////////////////////////////

	// 京东的几个特效

	// 1、轮播图(闪动效果)-多组复用

	// 2、生活的橱窗的左移右移的图片

	// 3、tab切换-多组

	// 4、3楼的移入图片变白-其他变黑

	// 5、二级菜单(好有技术含量)

	// 6、移入span 联动图片(滑动效果)

	// 7、热门晒单的li块往上滑动+无缝对接

	// 8、可是区域固定的右侧的srollTop
	
})
